<div class="details">
  <div class="details__io">
    <div class="request">
      <div class="request__label">inputs</div>
      <table class="request__inputs">
        <tr class="request__inputs-header">
          <td
            class="request__input-cell"
            *ngFor="let input of reqstoreEntry.request.inputs | keyvalue"
          >
            <span class="request__input-name"> {{ input.key }}</span>
          </td>
        </tr>
        <tr>
          <td
            class="request__input-cell"
            *ngFor="let input of reqstoreEntry.request.inputs | keyvalue"
          >
            <ng-container
              *ngTemplateOutlet="isImage(input.key) ? image : plainText"
            ></ng-container>
            <ng-template #image>
              <hs-tensor-image-list
                [tensorProto]="input.value"
              ></hs-tensor-image-list>
            </ng-template>
            <ng-template #plainText>
              <div class="request__input-value" hs-expander maxHeight="170">
                <div #expand>
                  {{ getValueAsText(input.value) }}
                </div>
              </div>
            </ng-template>
          </td>
        </tr>
      </table>
    </div>
    <div class="response">
      <div class="response__label">outputs</div>
      <div class="response__outputs">
        <div
          class="response__output"
          *ngFor="let output of reqstoreEntry.response.outputs | keyvalue"
        >
          <div class="response__output-name">{{ output.key }}</div>
          <div>
            <ng-container
              *ngTemplateOutlet="
                showAsList(output.key, output.value) ? asList : plainText
              "
            ></ng-container>
            <ng-template #asList>
              <hs-probabilities-list
                [probabilities]="getValue(output.value)"
              ></hs-probabilities-list>
            </ng-template>
            <ng-template #plainText>
              <div hs-expander maxHeight="170">
                <div class="response__output-value" #expand>
                  {{ getValueAsText(output.value) }}
                </div>
              </div>
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="details__footer">
    <div *ngFor="let task of explanationTasks$ | async">
      <span [ngSwitch]="task.status.state">
        <button
          *ngSwitchCase="'FAILURE'"
          hs-button
          kind="flat"
          color="warning"
          class="explanation__button"
          (click)="createExplanationTask(task.method)"
        >
          Retry
        </button>
        <button
          *ngSwitchCase="'NOT_QUEUED'"
          hs-button
          kind="flat"
          color="primary"
          class="explanation__button"
          (click)="createExplanationTask(task.method)"
        >
          EXPLAIN
        </button>
        <button
          *ngSwitchCase="'SUCCESS'"
          hs-button
          kind="flat"
          color="primary"
          class="explanation__button"
          (click)="showExplanation(task)"
          [disabled]="!task.explanation" 
        >
          SHOW EXPLANATION
        </button>
        <button
          *ngSwitchDefault
          hs-button
          kind="flat"
          color="primary"
          class="explanation__button"
          [disabled]="true"
        >
          {{ task.status.state }}
          <div
            *ngIf="task.status.state === 'STARTED'"
            class="explanation__progress"
            [ngStyle]="{
              transform:
                'translateX(-' + (100 - task.status.progress * 100) + '%'
            }"
          ></div>
        </button>
      </span>
    </div>
  </div>
</div>
